<template>
	<view class="index-container">
		<view class="titleStyPOs">
		
			<view class="flex w-full" style="padding-bottom: 10rpx;">
				<view style="position: relative; flex:1">
					<u-search :placeholder="$t('请搜索')" :showAction="true" :animation="false" bgColor="#fff" v-model="keyword"
						class="searchSty" @search="goFilter" @custom="goFilter" :action-text="$t('搜索')"></u-search>
				</view>
				<view  class="transport">
					<view class="transport_name">
						<city :value="paramsList.city_name" class="w-full" @change="e => {
							paramsList.city_name = e.column2.value == -1 || e.column3.value == -1 ?
								[e.column1[plang('label')], e.column2[plang('label')].replace('全部', ''), e.column3[plang('label')].replace('全部', '')].filter(item => item).join(',') :
								e.column3[plang('label')];
							paramsList.area_id = e.column3.value;
						}">
							<div class="h-full flex fz26 ml-5 w-full" :class="{ 'font-bold': paramsList.city_name }"
								:style="{ color: paramsList.city_name ? '#333' : '#8c8c8c' }">
								{{ paramsList.city_name || $t('请选择') }}
							</div>
						</city>
					</view>
					<u-icon v-if="paramsList.area_id" name="close" color="#8C8C8C" size="24rpx" class="ml-10" @click="delAddress"></u-icon>
					<u-icon name="arrow-down" color="#8C8C8C" size="24rpx" class="ml-10"></u-icon>
				</view>
			</view>
		</view>

		<!-- <view style="height: 400rpx;"></view> -->

    <scroll-view scroll-y class="scroll-view-container" @scrolltolower="onReachBottomxxx" style="height: 100%;">
      <view  class="" >
        <template v-for="(item, index) in supplierList">
          <view class=" infoBoxSty"  @click="goTogyDetail(item)">
            <view class="flex">
              <view class="img w-90 h-90 mt-10 ml-24 mb-10">
              <image :src="getImageUrl(item.logo || '')" mode="aspectFill" class="w-90 h-90 "
              style="border-radius: 500rpx;"></image>
              <view class="circle-gray" v-if="item.status != 2">
                  <image
                    :src="getImageUrl('/static/appx/locxk.png')"
                  />
                </view>
            </view>
              <view class="flex-1">
                <p class="ml-20 mr-20 fz28 mt-24 text-010 font-bold">{{ item[plang('name')] }}</p>
                <view class="flex-start ml-24">
                  <view class="" v-for="(it, ind) in scoreList">
                    <image v-if="it.num <= item.comment_score" class="w-20 h-20 ml-5"
                      src="/static/img/starBright.png"></image>
                    <image v-else class="w-20 h-20 ml-5" src="/static/img/starDark.png"></image>
                  </view> 
                    <span class="fz20 text-888 ml-10 ">{{$t('综合评分')}}: {{ item.comment_score }}</span>
                </view>
                <!-- <view class="flex-start ml-20 mt-15">
                  <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                  <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                  <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                  <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                  <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                  <span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">{{$t('综合评分')}}: {{ item.comment_score
                    }}</span>
                </view> -->
                <view class="flex-start mt-15 mb-24" style="align-items: center;">
                  <flag class="mr-6 ml-20 mt-5" :country="item.country" />
                  <!-- <image v-if="item.country == 0" src="@/static/icon/zh.png" mode="" class="ml-20 w-30 h-20">
                  </image>
                  <image v-else src="@/static/icon/ru.png" mode="" class="ml-20 w-30 h-20"></image> -->
                  <p class="fz20 text-888 ml-10 mr-24">{{ item.area_id && item.area_id[plang('mergename')] || $t('暂无') }}</p>
                </view>
              </view>
            </view>
            <view class="infoMainSty">
              <!-- <image v-if="item.isvip == 1" src="../../static/icon/goldIcon (2).png" mode="widthFix" class="w-120 ml-16"></image>
              <image v-else-if="item.isvip == 2" src="../../static/img/whiteGoldBusi.png" mode="widthFix" class="w-120 ml-16"></image>
              <image v-else-if="item.isvip == 3" src="../../static/icon/zuanshiIcon.png" mode="widthFix" class="w-120 ml-16"></image> -->

              <image v-if="item.isvip == 1" 
                :src="langR =='zh'?getImageUrl('/static/img/gj_zh.png'):getImageUrl('/static/img/gj_ru.png')" 
                mode="widthFix" class="w-120 ml-16"></image>
                <image v-else-if="item.isvip == 2" 
                :src="langR =='zh'?getImageUrl('/static/img/bj_zh.png'):getImageUrl('/static/img/bj_ru.png')" 
                mode="widthFix" class="w-125 ml-16"></image>
                <image v-else-if="item.isvip == 3" 
                :src="langR =='zh'?getImageUrl('/static/img/zs_zh.png'):getImageUrl('/static/img/zs_ru.png')" 
                mode="widthFix" class="w-140 ml-16"></image>
              <p class="ml-15 mr-24 jsscak">{{$t('主营范围')}} : {{ item[plang('desc')] || $t('暂无') }} </p>
            </view>
            <view v-if="item.prolist.length > 0" class="flex ml-15 mt-24 pb-24">
              <view class="" v-for="img in item.prolist">
                <image :src="getImageUrl(img.pic)" mode="aspectFill" class="w-155 h-155 ml-10"></image>
              </view>
            </view>
          </view>
        </template>
        <view class="h-30"></view>
        <view v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 30rpx;">
          {{$t('没有更多了')}}
        </view>
        <!-- <u-empty v-if="nomore" textSize="28rpx" iconSize="100rpx" :text="$t('没有更多了')"></u-empty> -->
      </view>
    </scroll-view>

	</view>
</template>

<script>
import {
	getBlist
} from '@/api/basic.js'
import {request_minute } from '@/api/basic.js'

export default {
	components: {
	},

	data() {
		return {
			listTitle: [this.$t('采购商'), this.$t('供应商')],
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			current: 0,
			keyword: '',
			title: this.$t('优质货主'),
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			storeList: [],
			scoreList: [{
				num: 1
			},
			{
				num: 2
			},
			{
				num: 3
			},
			{
				num: 4
			},
			{
				num: 5
			},
			],
			paramsCaigou: {
				page: 1,
				limit: 10,
				keyword: '',
				city_id: '',
				city_name: ''
			},
			paramsList: {
				pagenum: 1,
				limit: 10,
				aid: 1,
				keyword: '',
				area_id: '',
				city_name: ''
			},
			supplierList: [],
			nomore: false,
			nomoreCaigo: false,
			isShop: 0, // 1 从商城过来的 0 其他 
		}
	},
	watch: {
		'paramsList.area_id': {
			handler(val) {
				console.log(this.paramsList.area_id)
				this.getBlist(true)
			}
		},
	
	},
	mounted() {
		this.paramsCaigou.country = this.langR;
		this.paramsList.country = this.langR;
    this.getBlist(true)

	},
	onLoad(options) {
		this.isShop =  0;
		this.current = 0;

	},
	methods: {

		delAddress() {
			this.paramsList.area_id = ''
			this.paramsList.city_name = ''
			this.getBlist(true)
		},

		changeTitle(index) {
			this.current = index
			this.getBlist(true)
		},
		call(info) {
			if(uni.getStorageSync("user_id") == (info.mid || info.id)) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
			
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: info.mid || info.id,
				}).then(res => {
				if (res.data.data.flag == 1) {
					this.isMessageGo({
						action: 'call',
						data: {
							userId:  info.mid || info.id,
							type: res.data.data.type || 1,
						}
					})
				} else {
					uni.$u.toast(this.$t('积分不足，请充值积分'))
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
						})
					}, 500)
				}
			})
			
			}	
		},
		goToCaigoDetail(info) {
			if(info.identity != 2) {
				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('确认联系客户？'),
					confirmText: this.$t('确定'),
					cancelText: this.$t('取消'),
					success: (res) => {
						if(res.confirm) {
							this.call(info)
						}
					}
				})
				return;
			}
			uni.navigateTo({
				url: `/pages/myPersonPage/index?targetUserId=${info.id}`
			})
		},
		goTogyDetail(info) {
			console.log('info---', info.mid)
			// if(info.status != 2) {
			// 	uni.showModal({
			// 		title: this.$t('提示'),
			// 		content: this.$t('确认联系客户？'),
			// 		confirmText: this.$t('确定'),
			// 		cancelText: this.$t('取消'),
			// 		success: (res) => {
			// 			if(res.confirm) {
			// 				this.call(info)
			// 			}
			// 		}
			// 	})
			// 	return;
			// }
			uni.navigateTo({
				url: `/pages/details/merchantDetail?bid=${info.id}`,
				webview: 'zWebViewShop'
			})
		},
	
		//上拉加载
		onReachBottomxxx() {
				this.paramsList.pagenum++
				this.getBlist()
		},
		goFilter(e) {
      this.paramsList.keyword = e
      this.getBlist(true)
		},
		getBlist(init) {
			uni.showLoading({
				title: this.$t('加载中')
			});
			if (init) {
				this.paramsList.pagenum = 1
				this.nomore = false;
			}
			getBlist({ ...this.paramsList }).then(res => {
				console.log('res----', res)
				if (res.data.code == 1) {
					if (this.paramsList.pagenum == 1) {
						this.supplierList = res.data.data || []
					} else {
						this.supplierList = [...this.supplierList, ...res.data.data]
					}
					console.log('this.supplierList00', this.supplierList)
					//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
					if (this.get(res, 'data.data').length == 0 || this.get(res, 'data.data').length < 10) {
						this.nomore = true;
					}
				}
				uni.hideLoading()
			})
		}
	}

}
</script>

<style lang="scss" scoped>
	@import '@/assets/appScss.scss';

page {
	background: #F6F7FB;
}

.index-container {
	width: 100%;
	height: 100%;
	z-index: 60;
	// overflow: scroll;

	/deep/ .u-checkbox {
		width: 100% !important;
	}

	/deep/ .u-checkbox__label {
		width: 100% !important;
	}
}

.titleStyPOs {
	// background: #F6F7FB url("https://gluz-oss.oss-cn-beijing.aliyuncs.com/static/backcolorImg.png") no-repeat top / 100%;
	width: 100%;
	z-index: 10;
  margin-top: 18rpx;
}

.commonSty {
	color: #979CAA;
	font-family: PingFang SC;
	font-size: 32rpx;
	line-height: 32rpx;
	letter-spacing: 0px;
	height: 60rpx;
}

.activeSty {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 50rpx;
	letter-spacing: 0px;
	color: #000;
	border-bottom: 5rpx solid #4BB0FF;
}

.searchSty {
	// width: 65% !important;
	flex: 1;
	// display: flex;
	margin-left: 26rpx !important;
	// margin-top: 26rpx !important;
	// margin-bottom: 30rpx !important;

	/deep/ .u-search__content {
		background-color: #fff !important;
		height: 78rpx !important;
		// position: relative;
		// z-index: 2;
	}

	/deep/ .u-input {
		background-color: #fff !important;
	}

	/deep/ .u-icon__icon {
		font-size: 46rpx !important;
		color: #74C2FF !important;
	}

	/deep/ .u-action {
		width: 110rpx !important;
		height: 50rpx !important;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%) !important;
		text-align: center;
		line-height: 50rpx;
		font-family: PingFang SC;
		color: #fff;
		font-weight: 500;
		font-size: 26rpx;
		letter-spacing: 0px;
		border-radius: 500rpx;
		position: absolute;
		z-index: 10;
		right: 20rpx;
	}

	/deep/ .u-search__action {
		width: 110rpx;
		height: 50rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 50rpx;
		letter-spacing: 0px;
		color: #fff;
		position: absolute;
		z-index: 10;
		right: 16rpx;
	}
}

.transport {
	min-width: 135rpx;
	// margin-left: 16rpx;
	display: flex;
	align-items: center;
}

.infoBoxSty {
	background-color: #fff;
	margin-left: 24rpx;
	margin-right: 24rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding-bottom: 24rpx;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
}

.infoMainSty {
	min-height: 54rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	background-color: #FFF7EC;
	border-radius: 8rpx;
	// line-height: 54rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	p {
		font-size: 20rpx;
		color: #D58349;
	}
}
.jsscak {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.infoBoxSty {
	.img {
		position: relative;
	}
	.circle-gray {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		border-radius: 50%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 40rpx !important;
			height: 40rpx !important;
		}
	}
}


.scroll-view-container {

}

</style>
